<template>
  <div class="">
    <el-row>
      <el-col :span="24">
        <el-menu
          default-active="3"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >
          <el-menu-item index="/index/repairlist">维修列表</el-menu-item>
          <el-menu-item index="/index/wxkd">维修开单</el-menu-item>
          <el-menu-item index="3">救援开单</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row class="row-bg">
      <el-col :span="24">
        <el-button type="text" @click="save">保存</el-button>
        <el-button type="text">清空</el-button>
      </el-col>
    </el-row>
    <h2>救援单</h2>
    <h3>维修单号：{{ repair.repairbillno }}</h3>
    <el-form
      :inline="true"
      label-position="top"
      :model="repair"
      class="demo-form-inline"
    >
      <el-form-item label="车牌号" prop="uvehicleid">
        <el-input @focus="isShow(1)" v-model="ulicense"></el-input>
      </el-form-item>
      <el-form-item label="服务顾问" prop="armemberid">
        <el-input @focus="isShow(2)" v-model="armembername"></el-input>
      </el-form-item>
      <el-form-item label="维修班组" prop="artisansid">
        <el-cascader
          v-model="value"
          :options="group"
          :props="gProps"
          :clearable="true"
          :show-all-levels="false"
          @change="handleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="班组车辆">
        <el-select v-model="arvehicleid" placeholder="请选择">
          <el-option
            :label="item.arlicense"
            :value="item.arvehicleid"
            v-for="item in arvehicle"
            :key="item.arvehicleid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="驾驶员" prop="redriver">
        <el-input v-model="repair.redriver"></el-input>
      </el-form-item>
      <el-form-item label="驾驶员电话" prop="redriverphone">
        <el-input v-model="repair.redriverphone"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="出发地" prop="rbsaddress">
        <el-input v-model="repair.rbsaddress"></el-input>
      </el-form-item>
      <el-form-item label="救援地" prop="downtown">
        <el-input v-model="repair.downtown"></el-input>
      </el-form-item>
      <el-form-item label="里程">
        <el-input v-model="mileage"></el-input>
      </el-form-item>
      <br>
      <el-form-item label="业务类别" prop="serviceitid">
        <el-select v-model="repair.serviceitid" placeholder="请选择">
          <el-option
            :label="item.sename"
            :value="item.serviceitid"
            v-for="item in lx"
            :key="item.serviceitid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="施工班次" prop="shifstid">
        <el-select v-model="repair.shifstid" placeholder="请选择">
          <el-option
            :label="item.shiftsname"
            :value="item.shifstid"
            v-for="item in bc"
            :key="item.shifstid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算方式" prop="clearingformid">
        <el-select v-model="repair.clearingformid" placeholder="请选择">
          <el-option
            :label="item.clearingformname"
            :value="item.clearingformid"
            v-for="item in js"
            :key="item.clearingformid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出发时间" prop="gooff">
        <el-date-picker
          v-model="repair.gooff"
          type="datetime"
          placeholder="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="预计到达" prop="arrivaltime">
        <el-date-picker
          v-model="repair.arrivaltime"
          type="datetime"
          placeholder="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="预计完工" prop="repairbilldated">
        <el-date-picker
          v-model="repair.repairbilldated"
          type="datetime"
          placeholder="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <br>
      <el-form-item label="进厂油量" prop="userphone">
        <el-select v-model="repair.oilmassid" placeholder="请选择">
          <el-option
            :label="item.oilmassname"
            :value="item.oilmassid"
            v-for="item in yl"
            :key="item.oilmassid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="备注" prop="receptionnote">
        <el-input
          type="textarea"
          v-model="repair.receptionnote"
          rows="5"
        ></el-input>
      </el-form-item>
      <el-form-item label="报修陈述" prop="statement">
        <el-input
          v-model="repair.statement"
          type="textarea"
          rows="5"
        ></el-input>
      </el-form-item>
    </el-form>

    <!--车辆信息-->
    <el-dialog title="车辆信息" :visible.sync="dialogTableVisible1">
      <el-table :data="cl" @row-click="queryxlxx">
        <el-table-column property="ulicense" label="车牌号"></el-table-column>
        <el-table-column
          property="vtypename"
          label="车辆型号"
        ></el-table-column>
        <el-table-column property="resdriver" label="驾驶员"></el-table-column>
        <el-table-column
          property="driverphone"
          label="驾驶员手机号"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <!--员工信息-->
    <el-dialog title="员工信息" :visible.sync="dialogTableVisible2">
      <el-table :data="armember" @row-click="queryygxx">
        <el-table-column property="armembername" label="项目"></el-table-column>
        <el-table-column label="性别">
          <template slot-scope="temp">
            {{ temp.row.ararmembersex == "0" ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column property="arphone" label="手机号"></el-table-column>
        <el-table-column property="starname" label="员工星级"></el-table-column>
      </el-table>
    </el-dialog>

    <h2>操作</h2>
    <el-row>
      <el-col :span="15">
        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="handleClick"
        >
          <el-tab-pane label="添加项目" name="first">
            <el-form :inline="true" :model="repair" class="demo-form-inline">
              <el-form-item label="项目" prop="serviceitemid">
                <el-cascader
                  v-model="value"
                  :options="xm"
                  :props="xmProps"
                  :clearable="true"
                  :show-all-levels="false"
                  @change="handleChange2"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="价类" prop="mnpricetypeid">
                <el-select v-model="wxxm.mnpricetypeid" placeholder="请选择">
                  <el-option
                    :label="item.mnpricetypename"
                    :value="item.mnpricetypeid"
                    v-for="item in jl"
                    :key="item.mnpricetypeid"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="服务顾问" prop="armembername">
                <el-input v-model="armembername" disabled></el-input>
              </el-form-item>
              <el-form-item label="数量" prop="rbprojectsl">
                <el-input-number
                  @change="price()"
                  v-model="wxxm.rbprojectsl"
                  min="0"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="价格" prop="yprice">
                <el-input v-model="wxxm.yprice"></el-input>
              </el-form-item>
              <br />
              <el-form-item label="故障描述" prop="rbprojectms">
                <el-input
                  type="textarea"
                  rows="5"
                  v-model="wxxm.rbprojectms"
                ></el-input>
              </el-form-item>
              <el-form-item label="故障原因" prop="rbprojectyy">
                <el-input
                  type="textarea"
                  rows="5"
                  v-model="wxxm.rbprojectyy"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-button type="success" @click="tjxm">添加项目</el-button>
          </el-tab-pane>
          <el-tab-pane label="项目详情" name="second">
            <el-table :data="xms">
              <el-table-column label="项目编号">
                <template slot-scope="temp">
                  {{ temp.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                property="rbprojectsl"
                label="数量"
              ></el-table-column>
              <el-table-column property="yprice" label="原价"></el-table-column>
              <el-table-column
                property="yprices"
                label="会员价"
              ></el-table-column>
              <el-table-column
                property="rbprojectms"
                label="故障描述"
              ></el-table-column>
              <el-table-column
                property="rbprojectyy"
                label="故障原因"
              ></el-table-column>
              <el-table-column
                property="nocharge"
                label="免单原因"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="temp">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="del(temp.row.rbprojectid)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="附加项目" name="third">
            <el-form :inline="true" :model="repair" class="demo-form-inline">
              <el-form-item label="附加项目名称" prop="subjoinitemname">
                <el-input
                  v-model="fjxm.subjoinitemname"
                  placeholder=""
                ></el-input>
              </el-form-item>
              <el-form-item label="价类" prop="mnpricetypeid">
                <el-select v-model="fjxm.mnpricetypeid" placeholder="请选择">
                  <el-option
                    :label="item.mnpricetypename"
                    :value="item.mnpricetypeid"
                    v-for="item in jl"
                    :key="item.mnpricetypeid"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="预计时间" prop="subjointime">
                <el-select v-model="fjxm.subjointime" placeholder="请选择">
                  <el-option label="1小时" value="1"></el-option>
                  <el-option label="2小时" value="2"></el-option>
                  <el-option label="3小时" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="价格" prop="subjoinprice" v-if="fjxm.mnpricetypeid != 2">
                <el-input v-model="fjxm.subjoinprice"></el-input>
              </el-form-item>
              <br />
              <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  rows="5"
                  v-model="fjxm.remark"
                ></el-input>
              </el-form-item>
              <br />
              <el-button type="success" @click="addfjxm">添加项目</el-button>
            </el-form>
            <el-table :data="fj">
              <el-table-column label="项目序号">
                <template slot-scope="temp">
                  {{ temp.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                property="subjoinitemname"
                label="附件项目名称"
              ></el-table-column>
              <el-table-column
                property="mnpricetypeid"
                label="付款类型"
              ></el-table-column>
              <el-table-column
                property="subjoinprice"
                label="项目价格"
              ></el-table-column>
              <el-table-column property="remark" label="备注"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="temp">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click="delSub(temp.row.subjoinitemid)"
                    circle
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      repair: {
        repairbillno: "",
        shifstid: "",
        serviceitid: "",
        clearingformid: "",
        settleid: "",
        uvehicleid: "",
        oilmassid: "",
        armemberid: "",
        servicestateid: 2,
        gooff: "",
        arrivaltime: "",
        repairbilldated:"",
        receptionnote: "",
        statement: "",
        redriver: "",
        redriverphone: "",
        artisansid: "",
        rbsaddress:"",
        downtown:"",
        serviceType:"救援单"
      },
      wxxm: {
        mnpricetypeid: "",
        serviceitemid: "",
        repairbillsno: "",
        artisansid: "",
        armemberid: "",
        rbprojectsl: 1,
        rbprojectms: "",
        rbprojectyy: "",
        yprice: 0,
        yprices: 0,
        nocharge: "",
      },
      fjxm: {
        repairbillsno: "",
        subjoinitemname: "",
        mnpricetypeid: "",
        subjoinprice: 0,
        remark: "",
        artisansid: "",
        subjointime: ""
      },
      mileage:"",
      xms: [],
      activeName: "first",
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      cl: [],
      armember: [],
      group: [],
      gProps: {
        value: "artisansid",
        label: "artisansname",
        expandTrigger: "hover",
        children: "artisansVOList",
        emitPath: false,
      },
      bc: [],
      lx: [],
      js: [],
      yl: [],
      jl: [],
      ulicense: "",
      cpricesl: 0,
      armembername: "",
      xm: [],
      xmProps: {
        value: "serviceitemid",
        label: "senamex",
        expandTrigger: "hover",
        children: "serviceitems",
        emitPath: false,
      },
      fj: [],
      arvehicle: [],
      arvehicleid:""
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    handleClick(tab, event) {
      if(tab.index == 1){
        this.queryXm();
      }
    },
    del(id){
      let th=this;
      this.$confirm("是否删除此项目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("http://127.0.0.1:8080/api/rb/delxm", { params: { id } })
            .then((res) => {
              if (res.data.code == 200) {
                th.$message({
                  message: "删除成功",
                  type: "success",
                });

                th.queryXm();
              }
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    queryXm(){
      let th=this;
      this.$http.get('http://127.0.0.1:8080/api/rb', {
        params: {
          billNo: this.repair.repairbillno
        }
      })
      .then(res => {
        th.xms = res.data;
      })
    },
    addfjxm() {
      this.fjxm.repairbillsno = this.repair.repairbillno;
      let th = this;
      this.$http
        .post("http://127.0.0.1:8080/api/sub/addSub", this.fjxm)
        .then((res) => {
          console.log(res);
          if ((res.data.code = 200)) {
            th.$message({
              message: "添加成功",
              type: "success",
            });
            th.querySub();
            th.fjxm = {
              repairbillsno: "",
              subjoinitemname: "",
              mnpricetypeid: "",
              subjoinprice: 0,
              remark: "",
              artisansid: "",
              subjointime: "",
            };
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    querySub() {
      let th = this;
      this.$http
        .get("http://127.0.0.1:8080/api/sub", {
          params: {
            billNo: this.repair.repairbillno,
          },
        })
        .then((res) => {
          th.fj = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    delSub(id) {
      let th = this;
      this.$confirm('是否删除此项目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http
            .delete("http://127.0.0.1:8080/api/sub/removeSub", { params: { id } })
            .then((res) => {
              if ((res.data.code = 200)) {
                th.$message({
                  message: "移除成功",
                  type: "success",
                });
                th.querySub();
              }
            })
            .catch((err) => {
              console.error(err);
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    isShow(i) {
      if (i == 1) {
        this.dialogTableVisible1 = true;
        this.clxxquery();
      } else if (i == 2) {
        this.dialogTableVisible2 = true;
        this.armemberquery();
      }
    },
    clxxquery() {
      let th = this;

      this.$http
        .get("http://127.0.0.1:8080/api/vehicle")
        .then((res) => {
          console.log(res);
          th.cl = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    armemberquery() {
      let th = this;

      this.$http
        .get("http://127.0.0.1:8080/api/armember")
        .then((res) => {
          console.log(res);
          th.armember = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    price() {
      this.wxxm.yprice = this.cpricesl * this.wxxm.rbprojectsl;
    },
    groupquery() {
      let th = this;

      this.$http
        .get("http://127.0.0.1:8080/api/ArtisansAction/queryArtisans")
        .then((res) => {
          console.log(res);
          th.group = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handleChange(value) {
      this.repair.artisansid = value;
      this.wxxm.artisansid = value;
      this.$http
        .get("http://127.0.0.1:8080/api/option/wqcl", {
          params: {
            aid: value,
          },
        })
        .then((res) => {
          this.arvehicleid = ""
          this.arvehicle = res.data;
        });
    },
    handleChange2(val) {
      console.info(val);
      let th = this;
      this.wxxm.serviceitemid = val;
      this.$http
        .get("http://127.0.0.1:8080/api/option/p", {
          params: { id: this.wxxm.serviceitemid },
        })
        .then((res) => {
          console.log(res);
          th.cpricesl = res.data.cpricesl;

          th.wxxm.yprice = th.cpricesl * th.wxxm.rbprojectsl;
          console.log(th.cpricesl);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    queryxlxx(row) {
      console.info(row);
      this.repair.uvehicleid = row.uvehicleid;
      this.ulicense = row.ulicense;
      this.dialogTableVisible1 = false;
    },
    queryygxx(row) {
      console.info(row);
      this.armembername = row.armembername;
      this.repair.armemberid = row.armemberid;
      this.wxxm.armemberid = row.armemberid;
      this.dialogTableVisible2 = false;
    },
    save() {
      let th = this;
      this.$http
        .post("http://127.0.0.1:8080/api/rep/addwxd", this.repair)
        .then((res) => {
          if ((res.data.code = 200)) {
            th.$message({
              message: "保存成功",
              type: "success",
            });
            th.$http.get('http://127.0.0.1:8080/api/a', {
              params: {
                km: th.mileage,
                id:th.arvehicleid
              }
            })
            history.back();
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    random_No(randomLen) {
      var random_no = "";
      for (var i = 0; i < randomLen; i++) {
        random_no += Math.floor(Math.random() * 10);
      }
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      let day = new Date().getDate();
      random_no = year + month.toString() + day + random_no;
      this.repair.repairbillno = random_no;
    },
    xmquery() {
      let th = this;

      this.$http
        .get("http://127.0.0.1:8080/api/option/xm")
        .then((res) => {
          th.xm = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    tjxm() {
      this.wxxm.repairbillsno = this.repair.repairbillno;
      console.info(this.wxxm);
      let th = this;
      this.$http
        .post("http://127.0.0.1:8080/api/rb/addr", this.wxxm)
        .then((res) => {
          console.log(res);
          if ((res.data.code = 200)) {
            th.$message({
              message: "添加成功",
              type: "success",
            });
            th.wxxm = {
              mnpricetypeid: "",
              serviceitemid: "",
              repairbillsno: "",
              artisansid: "",
              armemberid: "",
              rbprojectsl: 1,
              rbprojectms: "",
              rbprojectyy: "",
              yprice: 0,
              yprices: 0,
              nocharge: "",
            }
          }
          th.xms.push(th.wxxm);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    this.groupquery();
    this.random_No(4);
    this.xmquery();
    let th = this;
    this.$http
      .get("http://127.0.0.1:8080/api/option/shifts")
      .then((res) => {
        th.bc = res.data;
      })
      .catch((err) => {
        console.error(err);
      });

    this.$http
      .get("http://127.0.0.1:8080/api/option/serviceitemtype")
      .then((res) => {
        th.lx = res.data;
      })
      .catch((err) => {
        console.error(err);
      });

    this.$http
      .get("http://127.0.0.1:8080/api/option/clearingform")
      .then((res) => {
        th.js = res.data;
      })
      .catch((err) => {
        console.error(err);
      });

    this.$http
      .get("http://127.0.0.1:8080/api/option/oilmass")
      .then((res) => {
        th.yl = res.data;
      })
      .catch((err) => {
        console.error(err);
      });

    this.$http
      .get("http://127.0.0.1:8080/api/option/jl")
      .then((res) => {
        th.jl = res.data;
      })
      .catch((err) => {
        console.error(err);
      });
  },
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
</style>